<template>
  <div class="app-container">
    <el-row :span="24">
      <el-form :inline="true">
        <el-form-item>
          <el-input
            v-model="dataList.searchForm.Contents"
            auto-complete="off"
            placeholder="内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="findList()"
          >搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table
      v-loading="dataList.listLoading"
      :data="dataList.list"
      element-loading-text="Loading"
      border
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column align="center" label="意见内容">
        <template slot-scope="scope">{{ scope.row.Contents }}</template>
      </el-table-column>
      <el-table-column align="center" label="修改时间">
        <template slot-scope="scope">{{ scope.row.UpdateTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">{{ scope.row.CreateTime }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="dataList.searchForm.pageIndex"
      :page-count="dataList.searchForm.pageCount"
      :hide-on-single-page="true"
      @current-change="currentPageChange"
    />

  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

const _controllerName = 'feedback'
const _vuexNamespace = 'feedback/feedback'

export default {
  name: _controllerName,
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  components: {
    // add
  },
  data() {
    return {
      listLoading: true

    }
  },
  computed: {
    ...mapState(_vuexNamespace, {
      dataList: state => state.dataList,
      form: state => state.form
    })
  },
  created() {
    this.findList()
  },
  methods: {
    // 获取数据
    ...mapActions(_vuexNamespace, {
      loadNewForm: 'loadNewForm',
      // 查询列表
      findList: 'findList',
      // 加载表单
      loadForm: 'loadForm',
      // 保存表单数据
      save: 'save',
      // 移除数据
      remove: 'delete',
      handleSuccess: 'handleSuccess',
      handleNodeClick: 'handleNodeClick',
      checkedDepartment: 'checkedDepartment'
    }),
    // 状态管理事件
    ...mapMutations(_vuexNamespace, {
      // 勾选复选框改变事件
      selectionChange: 'selectionChange',
      // 重置检索文本框
      resetSearch: 'resetSearch',
      // 分页下拉框行数改变
      sizeChange: 'sizeChange',

      // 翻页
      currentPageChange: 'currentPageChange'
    })
  }
}
</script>
<style scoped>
.image {
  width: 148px;
  height: 148px;
}
</style>
